<template>
  <a-modal
    :title="isEdit ? '修改' : '添加'"
    :visible="show"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    width="70%"
    class="procedure-modal"
  >
    <div class="title">
      <a-form layout="inline">
        <a-form-item label="名称" :label-col="{ span: 4 }">
          <a-input placeholder="" />
        </a-form-item>
        <a-form-item label="描述" :label-col="{ span: 4 }">
          <a-input placeholder="" />
        </a-form-item>
        <a-form-item label="Part必填">
          <a-checkbox> </a-checkbox>
        </a-form-item>
      </a-form>
    </div>
    <div class="production-reporting">
      <div class="name">最终报产设置</div>
      <a-form layout="inline">
        <a-row>
          <a-col :span="12">
            <a-form-item label="本工序需要最终报产">
              <a-checkbox> </a-checkbox>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="报产时需要称重">
              <a-checkbox> </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="仅打印一张条码">
              <a-select default-value="lucy" style="width: 12.5rem">
                <a-select-option value="jack"> Jack </a-select-option>
              </a-select></a-form-item
            ></a-col
          >
          <a-col :span="12">
            <a-form-item label="关联外部条码类型">
              <a-select default-value="lucy" style="width: 12.5rem">
                <a-select-option value="jack"> Jack </a-select-option>
              </a-select></a-form-item
            ></a-col
          >
        </a-row>
      </a-form>
    </div>
    <div class="table-box">
      <div class="left">
        <div class="name">已绑定的工作单元</div>
        <div class="search">
          <a-input placeholder="输入编码,回车搜索" />
        </div>
        <a-table
          :columns="workUnitColums"
          :row-key="(record) => record.id"
          :data-source="procedureData"
          :scroll="{ y: 350 }"
          :loading="loading"
          @change="handleTableChange"
          :row-selection="rowSelection"
          :expanded-row-keys.sync="expandedRowKeys"
          size="middle"
        >
          <template slot="name" slot-scope="name">
            {{ name }}
          </template>
        </a-table>
      </div>
      <div class="center">
        <a-button
          style="margin-bottom: 10px"
          class="default-button"
          :disabled="expandedRowKeys.length == 0"
        >
          绑定
        </a-button>
        <a-button
          class="default-button"
          :disabled="notexpandedRowKeys.length == 0"
        >
          解绑
        </a-button>
      </div>
      <div class="right">
        <div class="name">未绑定的工作单元</div>
        <div class="search">
          <a-input placeholder="输入编码,回车搜索" />
        </div>
        <a-table
          :columns="notworkUnitColums"
          :row-key="(record) => record.id"
          :scroll="{ y: 350 }"
          :data-source="notprocedureData"
          :loading="loading"
          @change="handleTableChange"
          :row-selection="notrowSelection"
          :expanded-row-keys.sync="notexpandedRowKeys"
          size="middle"
        >
          <template slot="name" slot-scope="name">
            {{ name }}
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script>
const workUnitColums = [
  {
    title: "序号",
    dataIndex: "num",

    align: "center",
  },
  {
    title: "工作单元编码",
    dataIndex: "name",
    sorter: true,

    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "工作单元名称",
    dataIndex: "desc",

    align: "center",
  },
];//绑定的工作单元表头
const notworkUnitColums = [
  {
    title: "序号",
    dataIndex: "num",

    align: "center",
  },
  {
    title: "工作单元编码",
    dataIndex: "name",
    sorter: true,

    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "工作单元名称",
    dataIndex: "desc",

    align: "center",
  },
];//未绑定的工作单元表头

//绑定的工作单元表格选择函数
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

//未绑定的工作单元表格选择函数
const notrowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default {
  props: ["show", "isEdit"],
  data() {
    return {
      workUnitColums,//绑定的工作单元表头
      notworkUnitColums,//未绑定的工作单元表头
      rowSelection,//绑定的工作单元表格选择函数
      notrowSelection,//未绑定的工作单元表格选择函数
      expandedRowKeys: [],//绑定工作单元选中值
      notexpandedRowKeys: [],//未绑定工作单元选中值
      loading: false,//表格loading
      confirmLoading: false,//弹窗显示loading
      procedureData: [], //已绑定的
      notprocedureData: [], //未绑定的
    };
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$refs.reviseForm.clearValidate();
      this.$emit("update:show", false);
    },
    //确认添加/修改
    handleOk() {},
    //表格选择
    handleTableChange() {},
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
}
/deep/.ant-modal-body {
  height: 40.625rem;
  overflow-y: auto;

  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}
</style>
